<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
    /**
     * @author 谭湘元
     * @since 2009/04/23
     */
%>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<title>聋校备课与语言学习及矫治系统</title>
<fmt:setBundle basename="PathResource" scope="session" />

	<link type="text/css" href="<%=request.getContextPath()%>/<fmt:message key='jquery' />themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="<%=request.getContextPath()%>/<fmt:message key='jquery' />jquery.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/<fmt:message key='jquery' />ui/ui.core.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/<fmt:message key='jquery' />ui/ui.slider.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/<fmt:message key='jquery' />jquery.boxy.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/<fmt:message key='jquery' />ajaxHelper.js"></script>
	

<link href="<%=request.getContextPath()%>/<fmt:message key='StylePath' />style2.css"
	rel="stylesheet" type="text/css" />
	<script type="text/javascript">
	var evaluateLevel=1;
	var isAutoReplay = false;
	var playCount = 1;
	var waitMilliSeconds;
	var rightWindow;
	var leftWindow;
	$(function() {
		rightWindow = self.parent.frames["rightFrame"];
		leftWindow = self.parent.frames["left"];
		
		//初始化slider
		$("#slider").slider({
			value:50,
			min: 0,
			max: 100,
			step: 50,
			orientation: "horizontal",
			range: "min",
			animate: true,
			slide: function(event, ui) {
				evaluateLevel = ui.value/50;
			}
		});
		//为保存按钮绑定动作
		$("#saveButton").click(function(){
			
			saveEvaluateAjax();
		});
		//为评价记录按钮绑定动作
		$("#evaluateRecordButton").click(function(){
			queryStudentEvaluates();
		});
		//为参数按钮绑定动作
		$("#parameterButton").click(function(){
			showEvaluteParameterAjax();
		});
	});
	
	function vadioChecked(checkbox){
		document.getElementById("selectTime").disabled = !checkbox.checked;
		isAutoReplay = checkbox.checked;
		if(isAutoReplay){
			waitMilliSeconds = document.getElementById("selectTime").value;
		}
	}
	var evaluateText;
	function evaluationClick(radio,replaceText){
		evaluateText = radio.value;
		if(radio.value=="替代"){
			replaceText.disabled = !radio.checked;
		}else{
			if(radio.checked){
				replaceText.value = "";
				replaceText.disabled = "false";
			}
		}
	}
	function showEvaluteParameterAjax(){
		var yinqiang = leftWindow.getEvaluateParamerData(2);
		if(!yinqiang || yinqiang==""){
			alert("请先进行评测.");
			return;
		}
		var dialog = getDialogSource(getAjaxSource(),"loading..");
		leftWindow.displayApplet("none");
		var serverUrl="<%=request.getContextPath()%>/createParameterImage";
		
		
		$.ajax({
			url:serverUrl,
			type:'POST',
			timeout:200000,
			data:'yq1='+yinqiang,
			error: function(){alert('error1');dialog.hide();},//错误处理，隐藏进度条
			success:function(html){
				var jipin = leftWindow.getEvaluateParamerData(3);
				$.ajax({
					url:serverUrl,
					type:'POST',
					timeout:200000,
					data:'jp1='+jipin,
					error: function(){alert('error2');dialog.hide();},//错误处理，隐藏进度条
					success:function(){
						var youwushengbo = leftWindow.getEvaluateParamerData(4);
						$.ajax({
							url:serverUrl,
							type:'POST',
							timeout:200000,
							data:'ywsb='+youwushengbo,
							error: function(){alert('error3');dialog.hide();},//错误处理，隐藏进度条
							success: function(html){
								dialog.setTitle("参数");
								dialog.setContent(getParameterImages());
								dialog.resize(600,500);
								dialog.center();
							}
						});
					}
				});
			}
		});
		
	}
	function getParameterImages(){
		var result;
		result = "<div style=\"margin:0px;font-size:12px;font-family:宋体;height:600px;width:500px;text-align:center;\">";
		result+= "<table style=\"width:100%;\">";
		result+= "<tr><td valign=\"middle\" align=\"center\">音强：</td><td><img width=\"450px\" height=\"150px\" src=\"<%=request.getContextPath()%>/tempImageFile/<%=request.getSession().getId()%>_yinqiang.jpg \" /></td></tr>";
		result+= "<tr><td valign=\"middle\" align=\"center\">基频：</td><td><img width=\"450px\" height=\"150px\" src=\"<%=request.getContextPath()%>/tempImageFile/<%=request.getSession().getId()%>_jinpin.jpg \" /></td></tr>";
		result+= "<tr><td valign=\"middle\" align=\"center\">声波有无：</td><td><img width=\"450px\" height=\"150px\" src=\"<%=request.getContextPath()%>/tempImageFile/<%=request.getSession().getId()%>_youwushengbo.jpg \" /></td></tr>";
		result+= "</table><br>"+getDialogCloseSource();
		result+= "</div>";
		return result;
	}
	function getDialogSource(content,title){
		leftWindow.displayApplet("none");
		top.dialogCallback = function(){leftWindow.displayApplet('block');};
		var dialog = top.eval("new Boxy('"+content+"',{title:'"+title+"',unloadOnHide:true,closeable:true,afterHide:dialogCallback,modal:true});");
		return dialog;
	}
	
	function saveEvaluateAjax(){
		var ajaxurl = "<%=request.getContextPath()%>/evaluation.do?method=saveEvaluation";
		var params = getAjaxEvaluateParams();
		if(params=="") return;
		var dialog = getDialogSource(getAjaxSource(),"loading..");
		$.ajax({
		 url: ajaxurl,
		 type: 'POST',
		 dataType: 'html',
		 timeout: 20000,//超时时间设定
		 data:params,//参数设置
		 error: function(){alert('error');dialog.hide();},//错误处理，隐藏进度条
		 success: function(html){
			 dialog.setContent(html+getDialogCloseSource());
		 }
		});
	}
	function openEvaluationResultDialog(xmlString){
		//alert(xmlString);
		var xml = new ActiveXObject("Msxml.DOMDocument"); 
		xml.async = false;   
		xml.loadXML(xmlString);
				
		
		var totalScore = $(xml).find("result > totalScore").text();
		var toneScore = $(xml).find("result > toneScore").text();
		var sentence = $(xml).find("result > sentence").text();
		var source;
		source = "<div style=\"margin-left:10px;margin-right:10px;text-align:center;width:450px;font-family: 宋体;font-size: 12px;\">";
		source+="<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\" style=\"border-collapse:collapse;margin:0px;\">";
		
		source+="<tr><td colspan=\"2\" align=\"center\">";
		source+=getTotalScoreView(totalScore);
		source+="</td></tr>";

		source+="<tr><td width=\"35%\" align=\"left\"><b>评分文本：</b></td><td align=\"left\">";
		source+=sentence;
		source+="</td></tr>";
		
		source+="<tr><td align=\"left\"><b>整句发音得分：</b></td><td align=\"left\">";
		source+=getViewText(countLevel(totalScore));
		source+="</td></tr>";

		source+="<tr><td align=\"left\"><b>整句音调得分：</b></td><td align=\"left\">";
		source+=getViewText(countLevel(toneScore));
		source+="</td></tr>";

		source+="<tr><td colspan=\"2\" align=\"center\" valign=\"top\" width=\"100%\">";
		
		source+="<table width=\"100%\" style=\"text-align:center;border-collapse:collapse;margin:0px;\">"
		source+="<tr><td style=\"font-weight:bold;border:1px solid #E6F0F8;width:25%\" width=\"30%\" height=\"15px;\">音节</td><td width=\"70%\" style=\"font-weight:bold;border:1px solid #E6F0F8;\">得分</td></tr>";

		$.each($(xml).find("result words word"),function(i,n){
			source+="<tr><td height=\"20px;\" style=\"border:1px solid #E6F0F8;\">";
			source+=$(n).find("wordName").text();
			source+="</td><td style=\"border:1px solid #E6F0F8;\">";
			source+=getViewText(countLevel($(n).find("totalScore").text()));
			source+="</td></tr>";
			});
		
		source+="</table></td></tr>";
		
		source+="</table>";
		source+= "</div>";

		getDialogSource(source+getDialogCloseSource(),"评估结果")
		
	}
	function getTotalScoreView(totalScore){
		var level = countLevel(totalScore);
		var result = "<table><tr>";
		for(var i=0;i<=level;i++){
			result+="<td><img src=\"reference/images/score.gif\" width=\"24px\" height=\"24px\" border=\"0\"/></td>";
		}
		result+="<td> &nbsp;&nbsp;("+totalScore+" 分)</td>"
		result+="</tr></table>";
		return result;
	}
	function getViewText(level){//根据等级计算显示文本
		if(level==1) return "念得不好，错误比较多，要加倍努力。";
		if(level==2) return "念得不错，但还需要加倍努力。";
		if(level==3) return "念得还过得去，还需继续练习。";
		if(level==4) return "念得很好，你太棒了。";
		return "错误";
	}
	function countLevel(score){//根据得分划分等级
		if(score<20) return 1;
		if(score<50) return 2;
		if(score<90) return 3;
		if(score<=100) return 4;
		return 0;
	}
	function queryStudentEvaluates(){
		var url="<%=request.getContextPath()%>/evaluation.do?method=queryStudentEvaluations";
		var studentID = rightWindow.getStudentID();
		if(studentID==""){
			alert("请先选择学生！");
			return "";
		}
		var dialog = getDialogSource(getAjaxSource(),"loading..");
		var params = "&studentID="+studentID;
		$.ajax({
			url:url,
			type: 'POST',
			dataType: 'html',
			timeout: 20000,//超时时间设定
			data:params,//参数设置
			error: function(){alert('error');dialog.hide();},//错误处理，隐藏进度条
			success: function(html){
				dialog.setTitle("评价记录");
				dialog.setContent(html);
				dialog.resize(600,450);
				dialog.center();
			}
	
		});
		
	}
	
	function getAjaxEvaluateParams(){
		var result;
		if(evaluateText){
			result = "&evaluateResult="+evaluateText;
		}else{
			alert("请先进行评价！");
			return "";
		}
		if(evaluateText=="替代"){
			if($('#replaceText').val()==""){
				alert("请填写替代音！");
				$('#replaceText').focus();
				return "";
			}
			
			result+="&replaceText="+$('#replaceText').val();
		}
		var studentID = rightWindow.getStudentID();
		if(studentID==""){
			alert("请先选择学生！");
			return "";
		}
		result+="&studentID="+studentID;
		return result;
	}
	</script>
</head>

<body class="bottom_style" bgcolor="#ccea68">
<form id="form1" name="form1" method="post" action="">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="100" align="center" valign="top" bgcolor="#ccea68">
		  <table width="100%" border="0" cellspacing="1"><tr>
				<td width="45%" align="center">
				  <table width="100%" border="0" cellspacing="5" cellpadding="0">
					<tr>
					  <td align="left" width="55px;">难度:</td>
					  <td align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr valign="middle">
							<td width="20px" height="3px;">&nbsp;</td>
							<td width="1px" height="3px;">|</td>
							<td height="3px;"></td>
							<td width="1px" height="3px;">|</td>
							<td height="3px;"></td>
							<td width="1px" height="3px;">|</td>
							<td width="25px" height="3px;">&nbsp;</td>
						</tr>
						<tr>
							<td valign="top" width="20px" style="color:blue">易 </td>
							<td valign="top" colspan="5"><div id="slider"></div></td>
							<td valign="top" width="25px" style="color:blue;">&nbsp;&nbsp;难</td>
						</tr></table>
					  </td>
					</tr>
					<tr>
					  <td align="left" width="55px;">播放选项:</td>
					  <td align="left">
						<input type="checkbox" onclick = "vadioChecked(this);"/> 自动循环&nbsp;&nbsp;时间间隔 
							<select id="selectTime" name="selectTime" disabled="false" onchange="javascript:waitMilliSeconds=this.value">
								<option value="1">1秒</option>
								<option value="2">2秒</option>
								<option value="5">5秒</option>
								<option value="10">10秒</option>
								<option value="20">20秒</option>
							</select>
					  </td>
					</tr>
				  </table>              
				</td>
				<td width="55%" align="center"><table width="100%" border="0" cellspacing="2" cellpadding="0">
				  <tr>
					<td align="center" width="5px;" align="right"><input type="radio" onclick="evaluationClick(this,replaceText);" name="radio" id="radio" value="正确" /></td>
					<td align="center" width="25px;" align="left">正确</td>
					<td align="center" width="5px;" align="right"><input type="radio" onclick="evaluationClick(this,replaceText);" name="radio" id="radio2" value="歪曲" /></td>
					<td align="center" width="25px;" align="left">歪曲</td>
					<td align="center" width="5px;" align="right"><input type="radio" onclick="evaluationClick(this,replaceText);" name="radio" id="radio3" value="丢失" /></td>
					<td align="center" width="25px;" align="left">丢失</td>
					<td align="center" width="5px;" align="right"><input type="radio" onclick="evaluationClick(this,replaceText);" name="radio" id="radio4" value="替代" /></td>
					<td align="center" width="25px;" align="left">替代</td>
					<td align="right">具体内容：</td>
					<td align="left">
					  <input id="replaceText" name="replaceText" type="text" class="left_bor" disabled="false" style="width:60px;" maxlength="10"/></td>
				  </tr>
				  <tr>
					<td align="center" colspan = "10">
						<table border="0" cellspacing="5" cellpadding="0"><tr>
							<td><img id="evaluateRecordButton" style="cursor: pointer" src="<%=request.getContextPath()%>/<fmt:message key='CommonImagePath' />jz_img/jzxx/pingjiajilu.gif" width="63" height="22" border="0" /></td>
							<td><img id="parameterButton" style="cursor: pointer" src="<%=request.getContextPath()%>/<fmt:message key='CommonImagePath' />jz_img/jzxx/canshu.gif" width="53" height="22" border="0" /></td>
							<td><img id="saveButton" style="cursor: pointer" src="<%=request.getContextPath()%>/<fmt:message key='CommonImagePath' />jz_img/save.gif" width="53" height="22" border="0" /></td>
						</tr></table>
					</td>
				  </tr>
				</table></td></tr>
		  </table>
	  </td>
    </tr>
  </table>
</form>
<div id="dialog" title="Dialog Title"></div>
</body>
</html>
